<template>
  <div class="number_record_box">
    <div class="header">
      <el-button type="info" style="background-color: #6e767c" @click="router.push('/nav')">回主页</el-button>
      <el-button type="primary" @click="onDete()">删除选中项</el-button>
      <el-button type="primary" @click="getList">搜索</el-button>
      <div class="flex" style="margin-left: 12px; white-space: nowrap">已选择：<span>{{deleteIds.length}}</span>项</div>
    </div>
    <div class="content">
      <div class="flex" style="height: 42px; font-size: 18px; color: #000">
        <span>登记总数：</span>
        <span>{{total}}</span>
        <span style="margin-left: 24px">龙：</span>
        <span>{{dragonNotes}}</span>
        <span style="margin-left: 24px">蛇：</span>
        <span>{{snakeNote}}</span>
      </div>
      <div class="flex">
        <div class="label">J</div>
        <el-input v-model="codeNumber" placeholder="请输入冠字号"></el-input>
      </div>
      <div class="flex" style="margin: 12px 0">
        <div class="label">分类:</div>
        <div class="flex" style="width: 100%; justify-content: space-between">
          <el-popover placement="bottom" :visible="showBillType" trigger="click" effect="dark" :show-arrow="false" popper-class="my-popover">
            <template #reference>
              <el-button type="info" plain @click="showBillType=!showBillType; showNumberType=false" style="width: 50%; background-color: #dddddd; color: #1677ff">{{formatBillType(billType)}}</el-button>
            </template>
            <div>
              <div v-for="item in billTypes" :key="item.value" class="popup-item flex" @click="billType=item.value; showBillType=false">
                <span style="width: 28px" class="flex">
                  <svg v-if="billType === item.value" t="1742111829663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3466" width="28" height="28"><path d="M320.05 506.15c-13.3-15.2-36.41-16.74-51.61-3.43-15.2 13.3-16.74 36.41-3.43 51.61l128 146.3c13.27 15.22 36.37 16.8 51.59 3.52 0.91-0.79 1.77-1.62 2.6-2.5l310.87-329.13c13.87-14.68 13.21-37.82-1.47-51.69s-37.82-13.21-51.69 1.47L421.64 622.29 320.05 506.15z" p-id="3467" fill="#ffffff"></path></svg>
                </span>{{item.label}}
              </div>
            </div>
          </el-popover>
          <el-popover placement="bottom" :visible="showNumberType" trigger="click" effect="dark" :show-arrow="false" popper-class="my-popover">
            <template #reference>
              <el-button type="info" @click="showNumberType=!showNumberType; showBillType=false" plain style="width: 50%; background-color: #dddddd; color: #1677ff">{{formatNumberType(numberType)}}</el-button>
            </template>
            <div>
              <div v-for="item in numberTypes" :key="item.value" class="popup-item flex" @click="numberType=item.value; showNumberType=false">
                <span style="width: 28px" class="flex">
                  <svg v-if="numberType === item.value" t="1742111829663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3466" width="28" height="28"><path d="M320.05 506.15c-13.3-15.2-36.41-16.74-51.61-3.43-15.2 13.3-16.74 36.41-3.43 51.61l128 146.3c13.27 15.22 36.37 16.8 51.59 3.52 0.91-0.79 1.77-1.62 2.6-2.5l310.87-329.13c13.87-14.68 13.21-37.82-1.47-51.69s-37.82-13.21-51.69 1.47L421.64 622.29 320.05 506.15z" p-id="3467" fill="#ffffff"></path></svg>
                </span>{{item.label}}
              </div>
            </div>
          </el-popover>
        </div>
      </div>
      <h2>登记记录</h2>
      <el-table
          class="my-table"
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="25" />
        <el-table-column label="种类" property="billType" width="55">
          <template #default="scope">{{ scope.row.billType === 0 ? '龙钞' : '蛇钞' }}</template>
        </el-table-column>
        <el-table-column property="serialNumber" label="冠字号" width="130"/>
        <el-table-column property="numberType" label="分类" width="120">
          <template #default="scope">
            {{formatNumberType(scope.row.numberType)}}
            <span>{{formatType(scope.row.nakedOrGraded)}}</span>
            <span v-if="scope.row.nakedOrGraded !== 0">{{scope.row.gradedScore}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="70">
          <template #default="scope">
            <el-button style="width: 42px; height: 28px !important;" type="primary" @click="()=>onDete(scope.row.ids ?? scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import router from "@/router";
import {ref} from "vue";
import {showConfirmDialog} from "vant";
import {deleteMy, listMy} from "@/api/api";
import {ElMessage} from "element-plus";

const total = ref(0)
const dragonNotes = ref(0)
const snakeNote = ref(0)


const codeNumber = ref('')
const billType = ref(-1)
const numberType = ref(-1)
const showBillType = ref(false)
const showNumberType = ref(false)
const tableData = ref([])
const deleteIds = ref([])
const billTypes = ref([{label: '全部', value: -1}, {label: '龙钞', value: 0}, {label: '蛇钞', value: 1}])
const numberTypes = ref([{label: '全部', value: -1}, {label: '单张', value: 0}, {label: '标十', value: 1},  {label: '标百', value: 2}, {label: '连续号', value: 3}])

const formatBillType = (type) =>{
  switch (type) {
    case -1:
      return '全部'
    case 0:
      return '龙钞'
    case 1:
      return '蛇钞'
  }
}

const formatNumberType = (type) =>{
  switch (type) {
    case -1:
      return '全部'
    case 0:
      return '单张'
    case 1:
      return '标十'
    case 2:
      return '标百'
    case 3:
      return '连续号'
  }
}

const formatType = (coinsType) =>{
  switch (coinsType) {
    case 0:
      return '裸币'
    case 1:
      return 'ACG'
    case 2:
      return 'PMG'
    case 3:
      return 'PCGS'
  }
}

const handleSelectionChange = (val) => {
  deleteIds.value = val.map(item => (item.ids ?? item.id)).flat()
}

const onDete = (deId) => {
  if (!deId && deleteIds.value.length < 1) {
    return ElMessage.warning({
      message: '请选择要删除的数据！',
      type: 'warning',
    });
  }
  showConfirmDialog({
    title: '',
    message: '确定要删除吗',
  })
      .then(() => {
        deleteMy(deId ?? deleteIds.value).then(res =>{
          if (res.code === 200){
            ElMessage.success('删除成功')
            getList()
          }else {
            ElMessage.error(res.msg)
          }
        })
      })
      .catch(() => {
        // on cancel
      });
}


function getList(){
  let data = {
    billType: billType.value,
    numberType: numberType.value,
    serialNumber: codeNumber.value
  }
  listMy(data).then(res =>{
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    tableData.value = res.rows
    total.value = res.total
    dragonNotes.value = res.rows.filter(item => item.billType === 0).length
    snakeNote.value = res.rows.filter(item => item.billType === 1).length
  })
}

getList()


</script>

<style lang="less">
.number_record_box {
  height: 100%;

  .header {
    display: flex;
    padding: 12px;
    box-shadow: 0 10px 15px -5px rgba(0,0,0,0.12);
  }

  .content {
    padding: 0 12px;

    .label {
      font-size: 18px;
      color: #000;
      margin-left: 6px;
      margin-right: 18px;
      white-space: nowrap;
    }

    .flex {
      .van-popover__wrapper {
        width: calc(50% - 6px);

        .el-button {
          width: 100% !important;
          background-color: #ddd !important;

          span {
            color: #409eff !important;
          }
        }
      }
    }

    .my-table {
      td .el-button > span {
        font-size: 13px !important;
      }
    }
  }

  .el-button--primary {
    background-color: #1677ff !important;
  }

  .el-table th.el-table__cell {
    background-color: #1677ff !important;
    color: #ffffff !important;
  }

  .el-table__header-wrapper {
    border-radius: 8px 8px 0 0;
  }

  .cell:has(.el-checkbox) {
    padding: 0 6px !important;
  }
}

.my-popover {
  padding: 0 !important;
  background-color: #4A4D50 !important;
  border-radius: 8px !important;

  .popup-item {
    padding: 10px;
    padding-left: 3px !important;
    border-bottom: 1px solid #ffffff29;
  }

  .popup-item:last-child {
    border: none !important;
  }
}
</style>
